<toaster-container></toaster-container>
<div>
    <h3>FTP Reports</h3>
</div>
<hr>
<div class="row">
    <div class="col-md-3">
        Account Name:
    </div>
    <select [(ngModel)]="selectedAccount" class="col-md-9 form-control" (change)="accountSelected()">
        <option *ngFor="let account of accounts" [ngValue]="account.id">{{account.name}}</option>
    </select>
</div>

<!--           
    public directoryPath: string;
 -->
<span *ngIf="edit == true && accountInfo">
    <div class="row mt-4">
        <div class="col-md-3">
            FTP Server Address:
        </div>
        <input [(ngModel)]="accountInfo.serverAddress" class="form-control col-md-9">
    </div>
    <div class="row mt-4">
        <div class="col-md-3">
            FTP Server Port:
        </div>
        <input [(ngModel)]="accountInfo.serverPort" class="form-control col-md-9">
    </div>
    <div class="row mt-4">
        <div class="col-md-3">
            FTP Server Type:
        </div>
        <select [(ngModel)]="accountInfo.ftpServerType" class="form-control col-md-9">
            <option *ngFor="let type of ftpTypes | enumToArray" [ngValue]="ftpTypes[type]">{{type}}</option>
        </select>
    </div>
    <div class="row mt-4">
        <div class="col-md-3">
            FTP User Name:
        </div>
        <input [(ngModel)]="accountInfo.username" class="form-control col-md-9">
    </div>
    <div class="row mt-4">
        <div class="col-md-3">
            FTP Password:
        </div>
        <input [(ngModel)]="accountInfo.password" class="form-control col-md-9">
    </div>
    <div class="row mt-4">
        <div class="col-md-3">
            Directory Path:
        </div>
        <input [(ngModel)]="accountInfo.directoryPath" class="form-control col-md-9">
    </div>
</span>

<span *ngIf="selectedAccount && edit==false" class="row mt-3">
    <button class="btn btn-primary-dark" (click)="editAccount()">
        Edit
    </button>
</span>

<span *ngIf="selectedAccount && edit==true" class="row mt-3">
    <button class="btn btn-primary-dark" (click)="save()">
        Save
    </button>
    <button class="btn btn-transparent" (click)="cancel()">
        Cancel
    </button>
</span>

<sustainalytics-table #reportsTable [columns]="columns" [source]="reports" [elementCount]="count" [paginationPositionDisplay]="paginationPosition"
  [displayTitle]="false" (buttonClicked)="onButtonClicked($event)">
</sustainalytics-table>

<div *ngIf="report && (editReport || add)" class="col-md-12 mb-3">
    <div class="cardStart card-body shadow">
        <div class="cellValue col-md-5">
            <select class="form-control" [(ngModel)]="report.reportId">
                <option *ngFor="let filter of filters" [ngValue]="filter.id">{{filter.name}}</option>
            </select>
        </div>
        <div class="cellValue col-md-2">
            <select class="form-control" [(ngModel)]="report.frequency">
                 <option *ngFor="let frequency of frequencyEnum | enumToArray" [ngValue]="frequencyEnum[frequency]">{{frequency}}</option>
            </select>
        </div>
        <div class="cellValue col-md-2">
        </div>
        <div class="cellValue col-md-3">
            <button class="btn btn-sm btn-transparent" (click)="saveReport()" [disabled]="report.reportId == undefined || report.frequency == undefined"> 
                <span *ngIf="add == true">Add</span>
                <span *ngIf="editReport == true">Save</span>
            </button>            
            <button class="btn btn-sm btn-transparent" (click)="cancelChanges()">
                Cancel
            </button>
        </div>
    </div>
</div>

<div *ngIf="selectedAccount && add == false" class="row mt-3">
    <button class="btn btn-primary-dark" (click)="addReport()">
        Add FTP Report
    </button>
</div>